<!-- created:2023/3/2 13:02 By AdinZ -->
<template>
  <ckeditor :editor="editor" v-model="html" :config="editorConfig" style="height: 450px"/>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn';

export default {
  name: "RichText",
  props: {
    value: String
  },
  data() {
    return {
      editor: ClassicEditor,
      editorConfig: {
        // The configuration of the editor.
        height: '500px',
        language: 'zh-cn',
        toolbar: {
          items: [
            'heading',
            'font',
            'highlight',
            '|',
            'bold',
            'italic',
            'link',
            'bulletedList',
            'numberedList',
            '|',
            'outdent',
            'indent',
            '|',
            'blockQuote',
            'insertTable',
            'mediaEmbed',
            'undo',
            'redo',
            'ckbox',
          ],
        },
        image: {
          toolbar: [
            'imageTextAlternative',
            'toggleImageCaption',
            'imageStyle:inline',
            'imageStyle:block',
            'imageStyle:side'
          ]
        },
        table: {
          contentToolbar: [
            'tableColumn',
            'tableRow',
            'mergeTableCells'
          ]
        },
        fontSize: {
          options: [8, 9, 10, 11, 12, 'default', 14, 16, 18, 20, 22, 24, 26, 28, 36, 44, 48, 72],
        },
        style: {
          height: '450px'
        }
      },
      html: ''
    }
  },
  watch: {
    value() {
      this.html = this.value;
    }
  },
  created() {
  },
  methods: {}
}
</script>

<style lang="scss">
.ck-editor__editable{
  //height: 500px;
}
</style>
